<template>
  <div>
    <h1
      style="
        height: 240px;
        font-size: 48px;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      "
    >
      Banner Of Mall
    </h1>
    <div>
      <h2>filter</h2>
      <a-form
        class="ant-advanced-search-form"
        :form="form"
        :label-col="{ xs: { span: 24 }, sm: { span: 6 }, md: { span: 4 } }"
        :wrapper-col="{ xs: { span: 24 }, sm: { span: 18 }, md: { span: 20 } }"
        @submit="handleSearch"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="Category">
              <a-cascader
                v-model="form.category"
                :field-names="{
                  label: 'name',
                  value: 'code',
                  children: 'items',
                }"
                :options="options"
                placeholder="Please select"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="Search">
              <a-input v-model="form.search" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" html-type="submit">
              Search
            </a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
              Clear
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <h2>CocosCreator Games</h2>
      <a-row align="middle" :gutter="24">
        <a-col :span="8">
          <a-card :span="8">
            <NuxtLink slot="cover" :to="'/mall/detail?id=' + 1"
              ><div
                style="
                  height: 240px;
                  line-height: 240px;
                  background-color: #8cc8ff;
                  text-align: center;
                "
              >
                Wechat MicGames
              </div></NuxtLink
            >
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :span="8">
            <NuxtLink slot="cover" :to="'/mall/detail?id=' + 2"
              ><div
                style="
                  height: 240px;
                  line-height: 240px;
                  background-color: #8cc8ff;
                  text-align: center;
                "
              >
                Wechat MicGames
              </div></NuxtLink
            >
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :span="8">
            <NuxtLink slot="cover" :to="'/mall/detail?id=' + 3"
              ><div
                style="
                  height: 240px;
                  line-height: 240px;
                  background-color: #8cc8ff;
                  text-align: center;
                "
              >
                Wechat MicGames
              </div></NuxtLink
            >
          </a-card>
        </a-col>
      </a-row>
      <h2>Web Sites</h2>
      <a-row align="middle" :gutter="24">
        <a-col :span="8">
          <a-card :span="8">
            <NuxtLink slot="cover" :to="'/mall/detail?id=' + 4"
              ><div
                style="
                  height: 240px;
                  line-height: 240px;
                  background-color: #b7eb8f;
                  text-align: center;
                "
              >
                Wechat MicGames
              </div></NuxtLink
            >
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :span="8">
            <NuxtLink slot="cover" :to="'/mall/detail?id=' + 5"
              ><div
                style="
                  height: 240px;
                  line-height: 240px;
                  background-color: #8cc8ff;
                  text-align: center;
                "
              >
                HTML5 Games
              </div></NuxtLink
            >
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :span="8">
            <NuxtLink slot="cover" :to="'/mall/detail?id=' + 6"
              ><div
                style="
                  height: 240px;
                  line-height: 240px;
                  background-color: #8cc8ff;
                  text-align: center;
                "
              >
                TouTiao MiniGames
              </div></NuxtLink
            >
          </a-card>
        </a-col>
      </a-row>
      <h2>Academic Research</h2>
      <a-row align="middle" :gutter="24">
        <a-col :span="8">
          <a-card :span="8">
            <NuxtLink slot="cover" :to="'/mall/detail?id=' + 7">
              <div
                style="
                  height: 240px;
                  line-height: 240px;
                  background-color: #13c2c2;
                  text-align: center;
                "
              >
                Wechat MicGames
              </div>
            </NuxtLink>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :span="8">
            <NuxtLink slot="cover" :to="'/mall/detail?id=' + 8">
              <div
                style="
                  height: 240px;
                  line-height: 240px;
                  background-color: #13c2c2;
                  text-align: center;
                "
              >
                HTML5 Games
              </div>
            </NuxtLink>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :span="8">
            <NuxtLink slot="cover" :to="'/mall/detail?id=' + 9"
              ><div
                style="
                  height: 240px;
                  line-height: 240px;
                  background-color: #13c2c2;
                  text-align: center;
                "
              >
                TouTiao MiniGames
              </div></NuxtLink
            >
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
export default {
  layout: 'mall',
  data: () => {
    return {
      form: {
        category: [],
        search: '',
      },
      options: [
        {
          code: '江西省',
          name: '江西省',
          items: [
            {
              code: '南昌市',
              name: '南昌市',
              items: [
                { code: '红谷滩区', name: '红谷滩区' },
                { code: '新建县', name: '新建县' },
              ],
            },
            {
              code: '赣州市',
              name: '赣州市',
              items: [
                { code: '章贡区', name: '章贡区' },
                { code: '会昌县', name: '会昌县' },
                { code: '瑞金市', name: '瑞金市' },
              ],
            },
          ],
        },
        {
          code: '浙江省',
          name: '浙江省',
          items: [
            {
              code: '杭州市',
              name: '杭州市',
              items: [
                { code: '滨江区', name: '滨江区' },
                { code: '西湖区', name: '西湖区' },
                { code: '下城区', name: '下城区' },
                { code: '江干区', name: '江干区' },
              ],
            },
            {
              code: '台州市',
              name: '台州市',
              items: [
                { code: '温岭市', name: '温岭市' },
                { code: '温州市', name: '温州市' },
                { code: '乐清市', name: '乐清市' },
              ],
            },
          ],
        },
        {
          code: '广东省',
          name: '广东省',
          items: [
            {
              code: '深圳市',
              name: '深圳市',
              items: [
                { code: '南山区', name: '南山区' },
                { code: '福田区', name: '福田区' },
                { code: '宝安区', name: '宝安区' },
              ],
            },
            {
              code: '广州市',
              name: '广州市',
              items: [
                { code: '番禺区', name: '番禺区' },
                { code: '越秀区', name: '越秀区' },
                { code: '天河区', name: '天河区' },
              ],
            },
          ],
        },
      ],
    }
  },
  methods: {
    handleSearch() {
      console.log(this.form)
    },
    handleReset() {
      this.form = {
        category: 0,
        search: '',
      }
    },
  },
}
</script>
